import React from 'react';
import { Button } from 'antd';

export default function FuncComp() {
  const [number, setNumber] = React.useState(0);
  React.useEffect(() => {
    console.log('useEffect', number);
  }, [number]);

  React.useLayoutEffect(() => {
    console.log('useLayoutEffect', number);
  }, [number]);

  React.useInsertionEffect(() => {
    // useInsertionEffect dom还没有变更
    // css-in-js antd5
    console.log('useInsertionEffect', number);

    // Styled-components
    /* 动态创建 style 标签插入到 head 中 */
    const style = document.createElement('style');
    style.innerHTML = `
           .css-in-js{
             color: red;
             font-size: 20px;
           }
         `;
    document.head.appendChild(style);
  }, [number]);

  return (
    <div className="css-in-js">
      <p>函数组件: {number}</p>
      <Button type="primary" onClick={() => setNumber(number + 1)}>
        +
      </Button>
    </div>
  );
}
